<template>
    <el-container>
        <el-aside width="200px" v-loading="showGrouploading">
            <el-container>
                <el-header>
                    <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''"
                        :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode"
                        @node-click="groupClick"></el-tree>
                </el-main>
            </el-container>
        </el-aside>

        <el-container>
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
                    <el-button type="primary" :loading="loading" :disabled="selection.length == 0"
                        @click="pushMultiplyData">批量权限设置</el-button>
                </div>
                <div class="right-panel">
                    <div class="right-panel-search" style="width: 300px;margin-top: 5px;margin-bottom: 5px">
                        <el-input @keyup.enter="upsearch" style="width: 200px;" v-model="search.name" placeholder="输入角色名称" clearable></el-input>
                        <el-button type="primary" icon="el-icon-search" style="margin-left: 10px"
                            @click="upsearch"></el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" border stripe :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <!--				<el-table-column label="ID" prop="id" width="150"></el-table-column>-->
                    <el-table-column align="center" label="角色名称" prop="roleName" width="200"></el-table-column>
                    <!-- <el-table-column label="角色编码" prop="roleCode" width="200"></el-table-column> -->
                    <el-table-column align="center" label="组织" prop="orgName" width="200"></el-table-column>
                    <el-table-column align="center" label="描述" prop="description" width="200"></el-table-column>
                    <el-table-column align="center" label="是否启用" prop="enable" width="200">
                        <template #default="scope">
                            <el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)"
                                :loading="scope.row.$switch_status" :active-value="0" :inactive-value="1"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template #default="scope">
                            <el-button-group>
                                <el-button text type="primary" size="small"
                                    @click="table_edit_power(scope.row, scope.$index)">权限设置
                                </el-button>
                                <el-button text type="primary" size="small"
                                    @click="table_show(scope.row, scope.$index)">查看
                                </el-button>
                                <el-button text type="primary" size="small"
                                    @click="table_edit(scope.row, scope.$index)">编辑
                                </el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button text type="primary" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </el-button-group>
                        </template>
                    </el-table-column>

                </scTable>
            </el-main>
        </el-container>
    </el-container>
    <el-drawer v-model="dialog.permission" :size="800" :title="permissionTitle" custom-class="drawerBG" direction="rtl"
        destroy-on-close>
        <permissionDialog v-if="dialog.permission" ref="permissionDialog" @success="handleSaveSuccess"
            @closed="dialog.permission = false"></permissionDialog>
    </el-drawer>
    <el-drawer v-model="dialog.save" :size="500" title="编辑" custom-class="drawerBG" direction="rtl" destroy-on-close>
        <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
            @closed="dialog.save = false"></save-dialog>
    </el-drawer>
    <el-drawer v-model="dialog.add" :size="500" title="新增" custom-class="drawerBG" direction="rtl" destroy-on-close>
        <add @guanbi="guanbi" ref="addDialog"></add>
    </el-drawer>
    <!--	<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>-->
</template>

<script>
import saveDialog from './edit'
import permissionDialog from './permission'
import add from './add'

export default {
    name: 'role',
    components: {
        saveDialog,
        permissionDialog,
        add
    },
    data() {
        return {
            groupFilterText: '',
            datas: {},
            group: [],
            showGrouploading: false,
            index: false,
            dialog: {
                save: false,
                permission: false,
            },
            apiObj: this.$API.basic.role.list,
            selection: [],
            search: {
                // keyword: null
            },
            params: {},
            node: {},
            loading: false,
            permissionTitle: '权限设置'
        }
    },
    watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val);
        }
    },
    mounted() {
        this.getGroup()
    },
    methods: {
        guanbi() {
            this.dialog.add = false
            this.$refs.table.clearSelection();
            this.$refs.table.getData();
        },
        //加载树数据
        async getGroup() {
            this.showGrouploading = true;
            var res = await this.$API.basic.org.list.post({ data: {} });
            this.showGrouploading = false;
            this.group = res.data;
        },
        //树过滤
        groupFilterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //树点击事件
        groupClick(data) {
            let orgIds = [];
            orgIds.push(data.id);
            var node = this.$refs.group.getNode(data);
            this.node = node
            this.getTree(node.data, orgIds)
            this.params.orgIds = orgIds;
            this.$refs.table.reload(this.params);
        },
        getTree(node, orgIds) {
            if (node.children === null || node.children.length == 0) {
                orgIds.push(node.id);
            } else {
                orgIds.push(node.id);
                node.children.forEach(item => {
                    this.getTree(item, orgIds)
                })
            }
        },
        //添加
        add() {
            if (!this.node.data) {
                this.$message.warning('未选择部门')
                return false
            }
            this.dialog.add = true
            this.$nextTick(() => {
                this.$refs.addDialog.open('add').setData(this.node.data)
            })
        },
        //编辑
        table_edit(row) {
            // this.datas=row
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
        },
        //查看
        table_show(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('show').setData(row)
            })
        },
        //权限设置
        table_edit_power(row) {
            this.permissionTitle = "权限设置"
            this.dialog.permission = true
            this.$nextTick(() => {
                this.$refs.permissionDialog.open(row, false)
            })
        },
        //删除
        async table_del(row, index) {
            var reqData = { id: row.id }
            var res = await this.$API.basic.role.delete.post({ data: reqData });
            if (res.code == 0) {
                this.$refs.table.refresh()
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },

        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //表格内开关
        changeSwitch(val, row) {
            row.enable = row.enable == 1 ? 0 : 1
            row.$switch_status = true;
            setTimeout(() => {
                delete row.$switch_status;
                row.enable = val;
                // console.log(typeof val, row)
                this.$message.success("操作成功")
            }, 500)
        },
        //搜索
        upsearch() {
            delete this.search.orgIds
            this.$refs.table.reload(this.search)
        },
        //根据ID获取树结构
        filterTree(id) {
            var target = null;

            function filter(tree) {
                tree.forEach(item => {
                    if (item.id == id) {
                        target = item
                    }
                    if (item.children) {
                        filter(item.children)
                    }
                })
            }

            filter(this.$refs.table.tableData)
            return target
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            this.dialog.save = false
            this.dialog.permission = false
            if (mode == 'add') {
                this.$refs.table.refresh()
            } else if (mode == 'edit') {
                this.$refs.table.refresh()
            }
        },
        pushMultiplyData(row) {
            this.permissionTitle = "批量权限设置"
            this.dialog.permission = true
            this.$nextTick(() => {
                this.$refs.permissionDialog.open(this.selection, true)
            })
        }
    }
}
</script>

<style></style>
